<!--首页主体内容区域-->
<template>
    <div class="content">    
        <div class="swiper-container banner">
            <div class="swiper-wrapper default">        
                <div class="swiper-slide">
                    <img src="./../assets/img/flash/flash-4.jpg" alt=""/>
                    <div class="text-box">
                        <h2>伊鲁卡老师</h2>
                        <p>色诱术</p>
                    </div>
                </div> 
                <div class="swiper-slide active">
                    <img src="./../assets/img/flash/flash-1.jpg" alt=""/>
                    <div class="text-box">
                        <h2>┗|｀O′|┛ 嗷~~  自来也</h2>
                        <p>自来也的忍法帖</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="./../assets/img/flash/flash-2.jpg" alt=""/>
                    <div class="text-box">
                        <h2>仙人脸谱</h2>
                        <p>仙人模式</p>
                    </div>
                </div>                   
                <div class="swiper-slide">
                    <img src="./../assets/img/flash/flash-3.jpg" alt=""/>
                    <div class="text-box">
                        <h2>鸣人与鸡田大人</h2>
                        <p>にわとり畑</p>
                    </div>
                </div> <!-- end of slide -->                
            </div> <!-- end of wrapper -->           
        </div> <!-- end of container --> 
        <div id="newsList" class="newsList">
            <ul>
                <li v-for="(item,index) in newsList">
                    <router-link :to="'/article/'+item.id">
                        <h3 v-text="item.title"></h3>  
                        <p v-text="item.detail"></p>
                    </router-link>        
                    <p v-text="item.dt" class="dt"></p>
                </li>
            </ul>  
        </div>  <!--end of new list-->     
    </div> <!--end of content-->     
</template>

<script type="text/javascript">
export default{
    name:"home",      //呵呵，这个name对开发本身好像没有什么影响
    data:function(){
        return {
            newsList:[]  
        }
    },
    mounted:function(){   
        var _this=this;      
        $(function (){
            //TODO:实例化图片轮播器，这里和上面的$()都是一种乱招，他是在vue中使用jquery.swiper，这区别与travel项目中的用法。
            //  陈老师用的是swiper2，我们这里改为3，在travel项目中要使用swiper组件的形式而不是这种jquery
            var mySwiper=new Swiper(".swiper-container",{
                onSlideChangeEnd:function(swiper){
                    console.log(swiper);
                }
            });
            //mySwiper.slideTo(2,100,null);          //开发调试使用使用

            //TODO:获取首页需相关数据,axios是现在推荐的获取数据方式，需要配置axios
            _this.$http.get("src/assets/data/index.json").then(function(arg1,arg2,arg3){        
                _this.newsList=arg1.data;  
            }).catch(function(err){
                console.log(err);
            });        
        });
    }
}
</script>

<style type="text/css">
    .swiper-slide{
        width: 100%; position: relative;
    }
    .swiper-slide img{
        width: 6.4rem; height: 3.2rem;
    }
    .swiper-slide .text-box{
        width:6.4rem;height:0.9rem; position:absolute; left:0; bottom:0.03rem; 
        color:#fff; background:rgba(0,0,0,0.5);
        text-indent: 0.2rem;
    }
    .swiper-slide .text-box h2{ 
        font-size:0.3rem; font-weight:normal; margin-top:0.15rem; line-height:100%; 
        margin-bottom:0.1rem; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
    }
    .swiper-slide .text-box p{ 
        line-height:100%; margin: 0.1rem auto;
    }
</style>